import React, { FC } from 'react';
import { connect, ConnectProps, ItemModelState } from 'umi';
import styles from './item.less';
import { Row, Col, Card, Radio } from 'antd';

// export default function Page() {
//   return (
//     <div>
//       <h1 className={styles.title}>Page item</h1>
//     </div>
//   );
// }

interface PageProps extends ConnectProps {
  item: ItemModelState;
}

const Item: FC<PageProps> = (props:any) => {
  const { item,dispatch } = props;
  console.log('🚀 ~ file: item.tsx ~ line 20 ~ item', item);
  const { items = [], filterKey = 0 } = item;
  const RadioGroup = Radio.Group;
  const itemType = [
    { key: 0, value: '全部' },
    { key: 1, value: '攻击' },
    { key: 2, value: '法术' },
    { key: 3, value: '防御' },
    { key: 4, value: '移动' },
    { key: 5, value: '打野' },
    { key: 7, value: '辅助' },
  ];

  const onChange = (e:any) => {
    console.log(e.target.value);
    dispatch({
      type: 'item/save',
      payload: {
        filterKey:e.target.value
      }
    })
  };
  return (
    <div>
      <Card className={styles.radioPanel}>
        <RadioGroup onChange={onChange} value={filterKey}>
          {itemType.map((type) => (
            <Radio value={type.key} key={`type-radio-${type.key}`}>
              {type.value}
            </Radio>
          ))}
        </RadioGroup>
      </Card>
      <Row>
        {items
          .filter((item) => filterKey === 0 || item.item_type === filterKey)
          .reverse()
          .map((item) => (
            <Col key={item.item_id} span={3} className={styles.heroitem}>
              <img
                src={`https://game.gtimg.cn/images/yxzj/img201606/itemimg/${item.item_id}.jpg`}
                alt=""
              />
              <p>{item.item_name}</p>
            </Col>
          ))}
      </Row>
    </div>
  );
};

export default connect(({ item }: { item: ItemModelState }) => ({ item }))(
  Item,
);
